<template>
  <view class="contenter">
    <indextime @time="time" :times="form" :index="index"></indextime>
    <view class="cont">
<!--      <view class="change u-flex flex_bt" @click="show = true">-->
<!--        <view>{{text}}</view>-->
<!--        <u-icon name="arrow-down"  color="#000000" size="28"></u-icon>-->
<!--      </view>-->
      <view>服务订单</view>
      <view class="main u-flex">
        <view class="num">
          <view class="shuzi u-flex">{{ data.num}}<text>单</text></view>
          <view class="name">订单数</view>
        </view>
        <view class="hei"></view>
        <view class="ren">
          <view class="shuzi u-flex">{{ data.user_num}}<text>人</text></view>
          <view class="name">服务人数</view>
        </view>
      </view>
    </view>
    <view class="cont">
      <!--      <view class="change u-flex flex_bt" @click="show = true">-->
      <!--        <view>{{text}}</view>-->
      <!--        <u-icon name="arrow-down"  color="#000000" size="28"></u-icon>-->
      <!--      </view>-->
      <view>商品订单</view>
      <view class="main u-flex">
        <view class="num">
          <view class="shuzi u-flex">{{ info.num}}<text>单</text></view>
          <view class="name">商品订单数</view>
        </view>
        <view class="hei"></view>
        <view class="ren">
          <view class="shuzi u-flex">{{ info.price}}<text>元</text></view>
          <view class="name">销售金额</view>
        </view>
      </view>
    </view>
    <u-picker mode="selector" :range="selectorObj" v-model="show" @confirm="confirm" range-key="cateName"></u-picker>
  </view>
</template>

<script>
import Indextime from "../../components/index/indexTime";
export default {
  name: "salesVolume",
  components: {Indextime},
  data(){
    return{
      show:false,
      text:"服务订单",
      selectorObj: [
        {
          cateName: '服务订单',
          id: 1
        },
        {
          cateName: '商品订单',
          id: 2
        }
      ],
      data: {},
      info: {},
      form:{
        end_time:'',
        start_time:'',
      },
      type:1,
      types:'',//1是当日 2是当月
      index:""
    }
  },
  onLoad(option){
    this.types = option.type //1是当日 2是当月
    if(this.types == 2){
      this.yearChange()
      this.index = 2
    }else {
      this.NewDay()
    }
  },
  methods:{
    setData(data){
      //服务订单详情
      let form = {
        type:1,
        start_time:this.form.start_time ,
        end_time:this.form.end_time ,
      }
      this.$api.orderNum(form).then(res => {
        this.data = res.data
      })
    },
    //商品订单详情
    setDataAll(data){
      //服务订单详情
      let form = {
        type:2,
        start_time:this.form.start_time ,
        end_time:this.form.end_time ,
      }
      this.$api.orderNum(form).then(res => {
        this.info = res.data
      })
    },
    //筛选时间
    time(time){
      this.form.start_time = time.start_time
      this.form.end_time = time.end_time
      this.setDataAll()
      this.setData()
    },

  },
}
</script>

<style scoped lang="scss">
  .cont{
    margin: 20rpx 32rpx;
    .change{
      background: white;
      padding:0 20rpx;
      height: 88rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #000000;
    }
    .main{
      height: 240rpx;
      background: #45806E;
      border-radius: 12rpx;
      padding: 46rpx 0;
      margin-top: 20rpx;
      .name{
        margin-top: 20rpx;
        color: white;
        font-size: 28rpx;
      }
      .num{
        padding-right: 80rpx;
        padding-left: 70rpx;
      }
      .hei{
        width: 4rpx;
        height: 150rpx;
        background: linear-gradient(158deg, #45806E 0%, #FFFFFF 100%);
        border-radius: 100rpx;
      }
      .ren{
        padding-left: 80rpx;
      }
      .shuzi{
        font-size: 60rpx;
        color: white;
        text{
          font-size: 24rpx;
        }
      }
    }
  }
</style>